<template>
  <div id="earlywarningSet">
     <div class="homeTitle">指标预警设置</div>
     <table>
         <tr>
           <td>指标名称</td>
           <td><span>*</span>监管要求 (%)</td>
           <td><span>*</span>超标线（含填写值）(%)</td>
           <td><span>*</span>报警线（含填写值）(%)</td>
           <td><span>*</span>提醒线（含填写值）(%)</td>
         </tr>
         <tr v-for="(item, index) in table" :key="index">
           <td>{{item.indicatorName}}</td>
           <td><el-input v-model="item.restrictValue" placeholder="请输入"></el-input></td>
           <td><el-input v-model="item.exceedValue" placeholder="请输入"></el-input></td>
           <td><el-input v-model="item.alarmValue" placeholder="请输入"></el-input></td>
           <td><el-input v-model="item.remindValue" placeholder="请输入"></el-input></td>
         </tr>
       </table> 
       <div class="btn">
         <el-button type="primary" size="small" @click="submit">提交</el-button>
         <el-button type="primary" size="small" @click="getData">取消</el-button>
       </div>
  </div>
</template>

<script>
export default {
  name: 'earlywarningSet',
  data () {
    return {
      table: []
    };
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      this.axios.get('superviseIndicator/findAllIndicator')
        .then(({data})=> {
          if (data.code == 200) {
            this.table = data.data;
          }
        })
    },
    submit () {
      let status = false;
      this.table.forEach((item, index) => {
        if (!item.alarmValue || !item.exceedValue || !item.remindValue || !item.restrictValue) {
          status = true
        }
      });
      if (status) {
        this.$message({message: '请您填写完整表格',type: 'warning'});
      } else {
        this.postData();
      }
    },
    postData () {
      let data = [];
      this.table.forEach((item, index)=> {
        data.push({alarmValue: item.alarmValue, exceedValue: item.exceedValue, id: item.id, remindValue: item.remindValue, restrictValue: item.restrictValue});
      })
      this.axios.post('superviseIndicator/updateIndicatorValue', {json : data})
        .then(({data})=> {
          if (data.code == 200) {
            this.$message({message: '更改成功', type: 'success'});
          } else {
            this.$message({message: data.message, type: 'warning'});
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  }
};
</script>

<style lang="scss">
  #earlywarningSet {
    input::-webkit-input-placeholder{
      color:red;
    }
    input::-moz-placeholder{   /* Mozilla Firefox 19+ */
      color:red;
    }
    input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
      color:red;
    }
    input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
      color:red;
    }
    table {
      margin-top: 20px;
      width: 100%;
      border: 1px solid #cccccc;
      border-collapse: collapse;
      background: rgba(255,255,255,.8);
      tr {
        td {
          padding: 5px 10px;
          border-right: 1px solid #cccccc;
          border-bottom: 1px solid #cccccc;
          text-align: center;
          span {
            color: red;
          }
          .el-input__inner {
            background: transparent;
          }
        }
      }
    }
    .btn {
      display: flex;
      padding: 20px;
      justify-content: center;
    }
  }
</style>
